<script setup >
import { deptTree, revenueStatisticsDetail } from "@/api/system/largeScreen";
import dayjs from "dayjs";
import { ref } from "vue";
import dot from "../../assets/images/screen/dot.png";
import { useHome } from "./composables/useHome";
const { transData } = useHome();
/* search */
const input1 = ref("");
const date = ref("");
const options = ref([]);

let headers = [
  { title: "机构", sortable: false, key: "deptName" },
  { title: "招投标服务收入", sortable: false, key: "ztbfwAmount" },
  { title: "标书收入", sortable: false, key: "bsAmount" },
  { title: "咨询收入", sortable: false, key: "zxAmount" },
  { title: "其他收入", sortable: false, key: "qtAmount" },
  { title: "合计收入", sortable: true, key: "totalAmount" },
  // { title: "日期", sortable: false, key: "businessTime" },
];
let Data = ref([]);
const total = ref(0);
const queryParams = ref({
  company: "",
  pageNum: 1,
  pageSize: 10,
  paymentOrderFlag: undefined,
  serialNumber: undefined,
  agent: undefined,
  agentDept: undefined,
  paymentAmount: undefined,
  paymentAmountStart: "",
  paymentAmountEnd: "",
  paymentMethod: undefined,
  voucherNumber: undefined,
  params: {
    endTime: undefined,
  },
});
const handleSizeChange = (e) => {
  console.log(e, "条数");
  queryParams.value.pageSize = e;
  getList();
};
const handleCurrentChange = (w) => {
  // queryParams.value.pageNum = w;
  console.log(w, "翻页");
  getList();
};
// const { proxy } = getCurrentInstance();
const emits = defineEmits(["onBack"]);
const props = defineProps({});
const goDigital = () => {
  emits("onBack", "yycbtj");
};
const getDeptTree = async () => {
  try {
    const res = await deptTree();
    if (res?.data?.length) {
      options.value = res.data;
    }
  } catch (error) {}

  // const res1 = await revenueStatistics(100);
  // debugger;
};
const getList = async () => {
  const res =
    input1.value &&
    (await revenueStatisticsDetail(
      queryParams.value.pageSize,
      queryParams.value.pageNum,
      input1.value,
      dayjs(date.value).format("YYYY"),
      dayjs(date.value).format("MM")
    ));
  Data.value = res.data.list;
  total.value = res.data.total;
};
onMounted(() => {
  getDeptTree();
  /* search */
  input1.value = transData.value?.deptId;
  date.value = dayjs(
    new Date(transData.value?.year, transData.value?.month - 1, 1)
  ).format("YYYY-MM");
  getList();
});
defineExpose({});
</script> 
<template>
  <div class="yycbtj-container">
    <div class="search">
      <el-icon size="28px" style="color: #4e5969" @click="goDigital"
        ><ArrowLeftBold
      /></el-icon>
      <div class="title-icon"></div>
      <span class="title-name">营业收入统计</span>
      <el-tree-select
        v-model="input1"
        :data="options"
        :render-after-expand="false"
        class="searchInput"
        default-expand-all
        suffix-icon="CaretBottom"
        node-key="id"
        :props="{}"
        check-strictly
        @change="getList"
      >
        <template #prefix>
          <el-icon><Search /></el-icon> </template
      ></el-tree-select>
      <el-date-picker
        class="searchPickerMonth"
        v-model="date"
        type="month"
        value-format="YYYY-MM"
        align="right"
        unlink-panels
        placeholder="请选择日期"
        :prefix-icon="none"
        @change="getList"
        disabled
      >
      </el-date-picker>
      <div class="danwei">（万元）</div>
    </div>
    <div class="table-main w-full h-full">
      <!-- <VRow class="match-height">
        <VCol cols="12"> -->
      <VDataTable
        :headers="headers"
        :items="Data"
        :items-per-page="queryParams.pageSize"
        fixed-header
        class="table-yysrtj"
      >
        <template #item.deptName="{ item }">
          <div style="display: flex; align-items: center">
            <el-image :src="dot" :fit="fit" class="dot" /> {{ item.deptName }}
          </div>
        </template>
        <template #item.ztbfwAmount="{ item }">
          <span>
            {{
              item.ztbfwAmount &&
              (Math.round(item.ztbfwAmount * 100) / 100).toFixed(2)
            }}
          </span>
        </template>
        <template #item.bsAmount="{ item }">
          <span>
            {{
              item.bsAmount &&
              (Math.round(item.bsAmount * 100) / 100).toFixed(2)
            }}
          </span>
        </template>
        <template #item.zxAmount="{ item }">
          <span>
            {{
              item.zxAmount &&
              (Math.round(item.zxAmount * 100) / 100).toFixed(2)
            }}
          </span>
        </template>
        <template #item.qtAmount="{ item }">
          <span>
            {{
              item.qtAmount &&
              (Math.round(item.qtAmount * 100) / 100).toFixed(2)
            }}
          </span>
        </template>
        <template #item.totalAmount="{ item }">
          <span>
            {{
              item.totalAmount &&
              (Math.round(item.totalAmount * 100) / 100).toFixed(2)
            }}
          </span>
        </template>
      </VDataTable>
      <div class="mypagination">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[10, 25, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- </VCol>
      </VRow> -->
      <!-- <el-table :data="Data" style="width: 100%" class="table-yycbtj">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@core/scss/template/digital.scss";
.yycbtj-container {
  height: 100%;
  background: #17142a;
  width: 100%;
  color: rgba(255, 255, 255, 1);
  .search {
    height: vh(102);
    padding-top: vh(28);
    display: flex;
    align-items: center;
    padding-left: vw(94);
    padding-right: vw(94);
    .title-icon {
      height: vh(36);
      width: vw(22);
      margin: 0 vw(6) 0 vw(10);
      background: url("@/assets/images/screen/t2.png") no-repeat;
      background-size: 100% 100%;
    }
    .title-name {
      font-size: 2rem;
      font-weight: 700;
      letter-spacing: -0.01px;
      line-height: 22px;
      color: rgba(255, 255, 255, 1);
    }
    .danwei {
      margin-left: auto;
      font-size: vw(30);
      font-weight: 700;
      color: rgba(160, 152, 174, 1);
    }
    :deep(.searchInput) {
      color: rgba(189, 189, 189, 1);
      background-color: transparent;
      margin: 0 vw(32) 0 vw(32);
      width: 240px;
      // height: vh(70);
      // line-height: vh(70);
      .el-select__wrapper {
        background-color: #17142a;
        // border-radius: 0.8rem;
        box-shadow: unset;
        padding-top: 0;
        padding-bottom: 0;
        // font-size: 1.6rem;
        .el-input__inner {
          color: rgba(189, 189, 189, 1);
        }
      }
      .el-select__placeholder {
        color: rgba(189, 189, 189, 1);
        font-weight: 400;
      }
      .el-select__prefix {
        font-size: 1.2rem;
        color: rgba(189, 189, 189, 1) !important;
        .el-icon {
          fill: rgba(189, 189, 189, 1);
        }
      }
      .el-select__selection {
        font-size: 1.2rem;
      }
      .el-select__suffix {
        font-size: 1.8rem;
        .el-icon {
          font-size: 1.8rem;
          color: #2a82e4;
        }
      }
    }
    :deep(.searchPickerMonth) {
      background-color: rgb(var(--v-theme-surface));
      width: vw(256);
      // opacity: 1;
      // height: vh(70);
      font-size: 1rem;
      background-color: transparent;
      color: rgba(135, 68, 225, 1);

      .el-input__wrapper {
        background-color: #17142a;
        border: 2px solid #8744e1;
        border-radius: 0.8rem;
        box-shadow: unset;
        .el-input__inner {
          color: rgba(135, 68, 225, 1);
          background: transparent;
        }
        .el-input__prefix {
          display: none;
        }
      }
    }
  }
  .table-main {
    padding: 0 vw(90) vh(60) vw(140);
    height: calc(100% - vh(102));
    :deep(.table-yysrtj) {
      height: calc(100% - 32px);
      background: transparent;
      .v-table__wrapper {
        > table {
          > thead {
            > tr {
              > th {
                background: #17142a;
              }
            }
          }
        }
      }
      th {
        .v-data-table-header__content {
          color: #ffffff;
          justify-content: center;
          font-size: vw(30);
          font-weight: 700;
        }
      }
      .v-data-table__td {
        color: #ffffff;
        font-size: vw(24);
      }
      tbody {
        > tr:not(:last-child) {
          > td {
            border-bottom: thin solid #bdbdbd, var(--v-border-opacity);
          }
        }
        > tr {
          &:nth-child(odd) {
            background: #28253b;
          }
          &:nth-child(even) {
            background: rgb(189, 189, 189, 20%);
          }
        }
      }
      .v-data-table-footer {
        color: #ffffff;
        .v-data-table-footer__items-per-page {
          .v-input {
            .v-field {
              border: 1px solid #ffffff;
              .v-field__input {
                color: #ffffff !important;
              }
            }
          }
        }
        .v-pagination {
          .v-select__selection-text {
            color: #ffffff;
          }

          .v-pagination__first,
          .v-pagination__prev,
          .v-pagination__next,
          .v-pagination__last {
            .v-btn {
              color: #ffffff;
              font-size: vw(24);
            }
          }
          .v-pagination__next {
            color: red;
            .v-btn__content {
              font-size: vw(30);
            }
          }
        }
      }
      // font-size: 1rem;
      // .v-table--density-default {
      //   // font-size: 2rem;
      // }

      .dot {
        width: vw(25);
        height: vw(25);
        margin-right: vw(20);
      }
    }
    :deep(.mypagination) {
      .el-pagination__total,
      .el-pagination__jump {
        color: #ffffff;
        font-size: vh(24);
        .el-input__wrapper {
          background: transparent !important;
          .el-input__inner {
            color: #ffffff;
            font-size: vh(24);
          }
        }
      }
      .el-pagination__sizes {
        background: transparent !important;
        .el-select {
          background: transparent;
          .el-select__wrapper {
            background: transparent;
          }
          .el-select__selected-item {
            color: #ffffff;
            font-size: vh(24);
          }
          .el-select__suffix {
            .el-select__caret {
              color: #ffffff;
              font-size: vh(30);
            }
          }
        }
      }
      .btn-prev,
      .btn-next {
        background: transparent !important;
        .el-icon {
          color: #ffffff;
          font-size: vh(30);
        }
      }
      .el-pager {
        background: transparent !important;
        color: #ffffff;
        font-size: vh(30);
        li {
          background: transparent !important;
          color: #ffffff !important;
          font-size: vh(24);
        }
      }
    }
  }
}
</style>
